import { Component, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

import { Hero } from '../shared/hero.model';
import { HeroService } from '../shared/hero.service';

@Component({
    selector: 'my-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css'],
    animations: [
        trigger('heroState', [
            state('inactive', style({
                backgroundColor: '#eee',
                transform: 'scale(1)'
            })),
            state('active', style({
                backgroundColor: '#cfd8dc',
                transform: 'scale(1.1)'
            })),
            transition('inactive => active', animate('200ms ease-in')),
            // You can also apply a style during an animation but not keep it around after the animation finishes. 
            // transition('inactive => active', animate('200ms ease-in', style({
            //     backgroundColor: 'red',
            //     transform: 'scale(1)'
            // }))),
            transition('active => inactive', animate('200ms ease-out'))
        ])
    ]
})
export class DashboardComponent implements OnInit {
    heroes: Hero[] = [];
    activedHero: boolean = false;
    heroState: string = 'inactive';
    favoriteFood: string = 'Steak';

    constructor(private heroService: HeroService) { }

    ngOnInit(): void {

    }

    trackByHeroes = this.heroService.trackByHeroes;

    toggleState(): void {
        this.heroState === 'inactive' ? this.heroState = 'active' : this.heroState = 'inactive';
    }
}